<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>律队</title>
  <link rel="shortcut icon" href="./img/b.ico"> 
  <link rel="stylesheet" href="./css/base.css"/> 
</head>
<body>
  <main>
    <div class="msgbox" id="msgbox">
      <!-- <div class="msg left">
        <img src="./img/b.png" alt="./img/b.png" width="40" height="40" srcset="">
        <section>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss </section>
      </div>
      <div class="msg right" > 
        <section>HELLOH </section>
        <img src="./img/b.png" alt="./img/b.png" width="40" height="40" srcset="">
      </div> -->
    </div>
    <textarea id="txt" placeholder="请输入内容"></textarea>
    <div class="tips" id="tips">内容不能为空</div>
  </main>
  <script>
 
     // WebSocket
    // 实例化,跟/ws/a建立链接
    // 接收自己发送的消息
    const ws = new WebSocket("ws://localhost:8080/ws/b")

    //连接成功回调
    ws.onopen = () => {
      console.log(`连接成功，连接状态为： ${ws.readyState}`, ws)
    }

    // 接收服务器返回的数据
    ws.onmessage = res => {
      console.log('bb', res);
      createMsg(res.data, true)
      msgbox.scrollTo({
        top: msgbox.scrollHeight,
        behavior: 'smooth'
      })
      // console.log(`返回的数据为 ${res.data}`,res)
    }

    // 连接断开时触发
    ws.onclose = () => {console.log(`连接已经断开`) }

    // 连接发生错误时触发
    ws.onerror = err => {console.log(`连接发生错误`, err)}

    // ==========================================
    // 接收消息链接
    const ws2 = new WebSocket("ws://localhost:8080/ws/b2")

    //连接成功回调
    ws2.onopen = () => {
      console.log(`连接成功，连接状态为： ${ws.readyState}`, ws2)
    }

    // 接收服务器返回的数据
    ws2.onmessage = res => {
      console.log('bb', res);
      createMsg(res.data)
      msgbox.scrollTo({
        top: msgbox.scrollHeight,
        behavior: 'smooth'
      })
      // console.log(`返回的数据为 ${res.data}`,res)
    }

    // 连接断开时触发
    ws2.onclose = () => {console.log(`连接已经断开`) }

    // 连接发生错误时触发
    ws2.onerror = err => {console.log(`连接发生错误`, err)}
    


    txt.onkeyup = function(e) {
      // console.log(e);
      let timer = null
      if (e.keyCode === 13) {//回车
        let val = txt.value
        if (val.trim() != '') {
          ws.send(val)
          // createMsg(val, true)
          // // 添加盒子的滚动
          // msgbox.scrollTo({
          //   top: msgbox.scrollHeight,
          //   behavior: 'smooth'
          // })
        } else {
          tips.style.display = 'block'
          timer != null ?  clearTimeout(timer) : ''
          timer = setTimeout(()=>{
             tips.style.display = 'none'
             clearTimeout(timer)
          }, 1000)
        }
        txt.value = ''
      }
    }
    
    // 生成html对话的函数
    function createMsg(val, isRight=false) {
      let html = ''
      if (isRight) {
        html = `<div class="msg right" > 
                      <section>${val}</section>
                      <img src="./img/b.png" alt="./img/b.png" width="40" height="40" srcset="">
                    </div>`
      } else {
        html = `<div class="msg left">
                      <img src="./img/a.png" alt="./img/a.png" width="40" height="40" srcset="">
                      <section>${val} </section>
                    </div>`
      }
      msgbox.innerHTML += html
    }
  </script>
</body>
</html>